﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasertTemplates.Master" AutoEventWireup="true" CodeBehind="ProductInformationForm.aspx.cs" Inherits="WebApplication.ProductInformationForm" %>
<%@ Register TagPrefix="uc1" TagName="usermeg" Src="~/UserControl/UserMessageControl.ascx" %>
<%@ Register TagPrefix="uc1" TagName="maintab" Src="~/UserControl/MainTabControl.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="Media/Js/jquery.lightbox-0.5.js"></script>
<link href="Media/Css/jquery.lightbox-0.5.css" rel="Stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        //tab2 selected
        //checkTab("t22");
        //show big picture
        $('#ImgList .p2 a').lightBox();
        $('#ImgList .showbig').each(function () {
            var self = $(this);
            self.click(function () {
                self.parents("li").find(".p2 img").click();
            })

        });
    })

    //数组， 
    var sub1 = [{ id: 0, name: "Textile & Garment", sub2: [{ id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 1, name: "Beads & Synthetic Stone" }
                                                                                                             ]
    },
                                                               { id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 1, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                               }
                                                              ]
    },
        { id: 2, name: "Electronics, AV & IT", sub2: [{ id: 1, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
        },
                                                   { id: 2, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                   },
                                                   { id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
                                                   }]
        },

        { id: 3, name: "Gifts & Premium", sub2: [{ id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup" },
                                                                                                             { id: 2, name: "Beads & Synthetic Stone" }
                                                                                                             ]
        }]
        },
        { id: 4, name: "Houseware", sub2: [{ id: 3, name: "Clothing Accessories", sub3: [{ id: 1, name: "Bra Pad Bra/Swimming Cup"}] }
                                          ]
        }

        ]//end


    //这个是第一个国家选项
    function show_sub2(id) {
        var val = "";  
        var str2 = "";
        var sub2 = [];
        sub2 = sub1[id].sub2;
        len = sub2.length;

        //设置被选
        $("#sub1_cn li").removeClass("cselected");       
        $("#li_1_" + id).addClass("cselected");

        val = sub1[id].name;
        $("#categorytxt").val(val);
        if (len > 0) {                      
            for (i = 0; i < len; i++) {
                str2 = str2 + '<li class=\"categorylist\" id=\"li_2_' + i + '\" onclick=\"show_sub3(\'' + id + "\',\'" + i + '\')\" >' + sub2[i].name + '</li>';

            }
            $("#category_sub2").show();
            $("#category_sub3").hide();
            $("#sub2_cn").children().remove();
            $("#sub2_cn").html(str2);

        } else {
            $("#category_sub2").hide();
        }

    }
    function show_sub3(id2,id3) {
        var str3= "";
        var sub3 = [];
        

        $("#sub2_cn li").removeClass("cselected");
        $("#li_2_" + id3).addClass("cselected");
        val = sub1[id2].name + " ; " + sub1[id2].sub2[id3].name;
        $("#categorytxt").val(val);

        sub3 = sub1[id2].sub2[id3].sub3;
        len = sub3.length;       
        var str3 = "";
        if (len > 0) {
            for (i = 0; i < len; i++) {
                str3 = str3 + '<li class=\"categorylist\" id=\"li_3_' + i + '\" onclick=\"insertInput(\''+ id2+'\',\''+ id3 + '\',\''+i + '\')\" >' + sub3[i].name + '</li>';

            }
            $("#sub3_cn").children().remove();
            $("#sub3_cn").html(str3);
            $("#category_sub3").show();
        } else {
            $("#category_sub3").hide();        
        }

    }
    function insertInput(id1, id2, id3) {

        $("#sub3_cn li").removeClass("cselected");
        $("#li_3_" + id3).addClass("cselected");
        val = sub1[id1].name + " ; " + sub1[id1].sub2[id2].name + " ; " + sub1[id1].sub2[id2].sub3[id3].name;
        $("#categorytxt").val(val);
    }

    function show_category() {

        $("#category_wrap").show();   
        var str1 = ""; 
        for (i = 0; i < sub1.length; i++) {
            str1 = str1 + '<li class=\"categorylist\" id=\"li_1_' + i + '\" onclick=\"show_sub2(\'' + i + '\')\" >' + sub1[i].name + '</li>';
        }

        $("#sub1_cn").children().remove();
        $("#sub1_cn").html(str1);
        

//      //  这里是鼠标点击其他地方的时候关闭弹出框	
//        document.onclick = function (e)   //要兼容FF的话，这个参数一定要写上   
//        {
//            e = window.event || e;
//            var srcElement = e.srcElement || e.target;
//            if (srcElement.id != "category_wrap1" && srcElement.id != "category_sub1" && srcElement.id != "category_sub2" && srcElement.id != "category_sub3" && srcElement.id != "address_details1" && srcElement.id != "country_text1" && srcElement.className != "linka") {
//                $("#category_wrap1").hide();
//            }
//        }

    }



</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <input type="hidden" value="t22" id="pageName" />
 <div class="content-title"><h1>Customer - Product Information</h1></div> 
         <div class="con-nav"><a href="#" class="btn"><span class="ui-icon ui-icon-newwin"></span>Add New Customer</a>
               </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<uc1:usermeg ID="usermeg" runat="server" ></uc1:usermeg>        
    <div class="partWrap">
    <uc1:maintab ID="maintab"  runat="server"/>
<div class="clear20"></div>
	<div class="clear10"></div>	
	<div><span>Product Image Information </span>| <a href="ProductInformationList.aspx"> Advertising Record</a></div>
	<div class="clear10"></div>	
  <table width="500" border="0">  
  <tr>
    <td>1 Free + 9 Advertising</td>
    <td></td>
  </tr>
  </table>
  <table width="100%" border="0">

    <tr>
    <td colspan="2">
    <ul class="ImgList" id="ImgList">
		<li>
		<%--<p class="p1">file img name</p>--%>
		<p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <%--<div class="p3">
		<img src="Media/Css/images/big001.png" class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>--%>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
		</li>

		<li>
        <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

        <li>
        <p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<p class="p1">file img name</p>
        <div class="p4"><span class="showbig">View</span> | <span class="editBtnbig">Edit</span> | <span class="closeBtnbig" onClick="closePannel('smallImgList')">Delete</span></div>
        </li>

		<%--<li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png" class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png" class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png" class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"  class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
			    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"  class="showbig" />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"   class="showbig"  />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image2.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"  class="showbig"  />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
		
				    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image3.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"  class="showbig"  />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        </div>
		</li>
			    <li>
		<p class="p1">file img name</p>
		<p class="p2"><a href="photos/image1.jpg" title="Product name <br/> Model No."><img src="Media/Css/images/155_151.jpg" /></a></p>
		<div class="p3">
		<img src="Media/Css/images/big001.png"  class="showbig"  />
		<img class="closeBtnbig" src="Media/Css/images/del-form.png" onClick="closePannel('smallImgList')">
         <img src="Media/Css/images/editbg.gif" class="editBtnbig" alt="" />
        
        </div>
		</li>--%>
		
		</ul>
	</td>
    
  </tr>
</table>

   <ul class="uibtn">
   	<li onClick="javascript:ToggleDocument('ImgInfo')"><span>Add Product Information</span></li>
	</ul> 
    <div id="ImgInfo" class="ImgInfo">
	<h4 class="title20">Product Image Information</h4>

  <table width="" border="0">  
  <tr>
    <td>Duration of advertising</td>
    <td> : </td>
    <td>01 Jun 2010 to 31 May 2011</td>
  </tr>
  </table>
    <div class="category_con" id="category_con">

    <div class="address_wrap" id="category_wrap">
		<div class="address_btn" id="address_btn" onclick="CloseDocument('category_wrap')">
					<div class="address_btn_wrap">
				     	<img src="Media/css/images/goodsdelete.gif" alt="" border="0" />
					</div>		
		</div>
		<div class="category_box1" id="category_sub1">
			<ul id="sub1_cn">
            
            </ul>
		</div>
		<div class="category_box2" id="category_sub2">
				<ul id="sub2_cn">
            
            </ul>
		</div>
		<div class="category_box3" id="category_sub3">
			<ul id="sub3_cn">
            
            </ul>
		</div>
		
		</div>


    </div>
	<table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	<tbody>	
	<tr>
	  <td><p class="upinput">Sequence No.</p>
	 <input type="text" class="input200" >
	  </td>
	  <td>
      <p class="upinput" >Product Category</p>
	 
	   <input type="text" onclick="show_category()" id="categorytxt" class="input400" >

	  </td>
	  <td><p class="upinput">Model No.</p>
	  <input type="text" value="No." class="input200" />
	  </td>
	</tr>
	
	<tr>
	  <td><p class="upinput">Product Name </p>
	  <input type="text" class="input200" >
	  </td>
	  <td><p class="upinput">Product Size </p>
	  <input type="text" class="input200" >
	  </td>
	  <td><p class="upinput">MOQ</p>
	  <input type="text" class="input200" >
	  </td>
	</tr>
	<tr>
	<td colspan="3">
	<p class="upinput">Product Specifications&nbsp;<em>(1,000.00 character limited)</em> </p>
	<textarea class="textarea800" >
	</textarea>
	</td>
	</tr>
	
	<tr>
	  <td><p class="upinput">產品名稱</p>
	  <input type="text" class="input200" >
	  
	  </td>
	  <td><p class="upinput">產品規格		</p>
	  <input type="text" class="input200" >
	  
	  </td>
	  <td><p class="upinput">最低訂貨量</p>
	  <input type="text" class="input200" >
	  </td>
	</tr>
	
	<tr>
	  <td colspan="3"><p class="upinput">產品說明&nbsp;<em>(限制1,000.00個字符)</em></p>
	 <textarea class="textarea800" >
	</textarea>
	  </td>	
	</tr>	
</tbody>
</table>


<table border="0" cellpadding="0" cellspacing="0" width="100%" class="basiform">
	<tbody>	
	<tr>
	<td colspan="3">
	<p>&nbsp;</p>
	<table width="520">
	<tr>
	 <%--<td valign="top" width="300" >
	 <p><strong>Product Image（Size: 220px*220px）</strong></p>
	<ul class="ImgActionList">
       <li><img src="Css/images/del-form.png"  />&nbsp;&nbsp;<span>Your computer upload path</span></li>
    </ul>
	 </td>--%>
	 <td valign="top" ><div class="addWrap"> 
	  <ul class="uibtn">
    	<li onClick="javascript:ToggleDocument('smallImgList2')"><span>Add Product Image</span></li>
	  </ul>	 
	 <div class="smallImgList" id="smallImgList2" style="bottom:-200px;">	
	<table width="100%">
	<tr>
	<td  align="right"> <img class="delete closeBtn" src="Media/Css/images/del-form.png" onClick="CloseDocument('smallImgList2')"></td>
	</tr>
	<tr>
	 <td><h5>Choose from Media Room</h5></td>
	</tr>
	<tr>
	<td>	
	 <div class="imgQu">
	 <ul class="slist">
		  <li><img src="Media/Css/images/010.png" ></li>
	 <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	  <li><img src="Media/Css/images/010.png" ></li>
	 <li><img src="Media/Css/images/010.png" ></li>
	 </ul>
	 </div>
	</td>
	</tr>
	<tr>
	<td height="35"><a href="#">Upload image from your computer </a></td>
	</tr>
     <tr>
    <td>
    <p class="red italic">Photo Specifications: Full Size 200pix(W) x 120pix(H); Format JPEG, BMP; File Size: 100KB</p>
    </td>
    </tr>

	<tr>

	<td height="35">
    <table  border="0" cellspacing="0" cellpadding="0" class="btnwrap">
			  <tr>
				<td  class="btnwrapl">
				 <ul class="uibtn">
    	              <li><span>Save</span></li>
	             </ul>
				</td>
				<td class="btnwrapr">
				 <ul class="uibtn">
    	           <li ><span>Quit</span></li>
	              </ul>
				</td>
                <td >
                </td>				
			  </tr>
			</table>	 </td>
	</tr>
	</table>
	 </div>
	 </div></td>
	</tr>

    <tr>
      <td valign="top" width="520">
       <div style=" margin-top:10px;"><p class="red italic">
        Photo Specifications: Full Size 200pix(W) x 120pix(H); Format JPEG, BMP; File Size: 100KB
       </p></div>
      </td>
    </tr>
    <tr>
      <td valign="top" width="300">
         <ul class="ImgActionList">
           <li><span class="firstletter">Delete</span>&nbsp;&nbsp;<span>Your computer upload path</span></li>
         </ul>
      </td>
    </tr><!--edit by peter 2011-02-25-->

	</table>	
	</td>	
	</tr>	
	<%--<tr>
	  <td><p></p></td>
	  <td><p></p></td>
	  <td><p></p></td>
	</tr>--%>
	<tr>
		<td colspan="3">
		<ul class="ImgList">
		    <li>
		<%--<p class="p1">file img name</p>--%>
		<p class="p2"><img src="Media/Css/images/155_151.jpg" /></p>
        <p class="p1">file img name</p>
		<%--<div class="p3">
		<img src="Media/Css/images/big001.png" />
		<img class="closeBtnbig" src="Css/images/del-form.png" onClick="closePannel('smallImgList')"></div>--%>
        <div class="p4">
          <span class="showbig">View</span> | <span class="closeBtnbig" onclick="closePannel('smallImgList')">Delete</span>
        </div>
		</li>
		
		</ul>
		</td>
	</tr>
	
	</tbody>
	</table>
	<div class="clear10"></div>
	
   <table width="250">
	<tr>
	<td width="60">
	 <ul class="uibtn">
    	<li ><span>Save</span></li>
	  </ul>	 
	</td>
	<td>
	 <ul class="uibtn">
    	<li ><span>Quit</span></li>
	  </ul>	
	</td>
	</tr>
	</table>
	
</div>
<div class="clear20"></div>
</div>	


</asp:Content>
